{% extends "shuup/admin/base.jinja" %}
{% block content %}
    <div class="container-fluid">
        {% if not is_variation %}
        <p class="text-info lead"><i class="fa fa-exclamation-circle fa-1.5x"></i> {% trans %}This product is not yet a variation.{% endtrans %}</p>
        <ul>
        <li><p>{% trans %}To create a simple variation, choose products below.{% endtrans %}</p></li>
        <li><p>{% trans %}To create a variation with multiple variables, create the variables on the Variables tab and then link them to products here.{% endtrans %}</p></li>
        </ul>
        <hr class="separator-line dark">
        {% endif %}
        <div class="row">
            <div class="col-lg-3 section-navigation" data-navigatee="product_form"></div>
            <div class="col-lg-9">
                <form method="post" id="product_form">
                    {% csrf_token %}
                    {% for form_def in form.form_defs.values() %}
                        {% include form_def.template_name with context %}
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    {{ super() }}
    <script src="{{ shuup_static("shuup_admin/js/product-variation-variable-editor.js") }}"></script>
{% endblock %}
{% block extra_css %}
    {{ super() }}
    <style>
    div.variable {
        border: 2px solid #f0f0f0;
        background: #f9f9f9;
        border-radius: 1em;
        padding: 1em;
        margin-bottom: 1em;
    }
    </style>

{% endblock %}
